<form spellcheck="false" [formGroup]="form" class="form center-vertical text-left" (submit)="saveOptions();">

  <mat-tab-group [animationDuration]="'0ms'" #tabs>

    <mat-tab>
      <ng-template mat-tab-label>
        <i class="mat-tab-icon moon-Settings"></i>
        <span class="mat-tab-label-text">General</span>
      </ng-template>

      <div class="panel">

        <ng-container *ngIf="appService.detectOs() === eOperatingSystem.mac">
          <h2>Security</h2>

          <div class="form-container">
            <div class="form-group">
              <div class="form-field">
                <label>Unlock with Touch ID</label>
                <mat-checkbox class="touch-id-enable-checkbox" formControlName="touchIdEnableSelect" [(ngModel)]="selectedTouchIdEnabled"></mat-checkbox>
              </div>
            </div>
          </div>

          <div class="form-container">
            <div class="form-group">
              <div class="form-field">
                <label>Require password</label>
                <ng-select formControlName="requirePasswordSelect" bindLabel="key" bindValue="value" [clearable]="false"
                           [items]="[
                             eConstants.requirePasswordEveryWeek,
                             eConstants.requirePasswordEveryTwoWeeks,
                             eConstants.requirePasswordEveryMonth,
                             eConstants.requirePasswordNever
                           ]"
                           [(ngModel)]="selectedRequirePassword" [appendTo]="'body'"></ng-select>
              </div>
            </div>
          </div>
        </ng-container>
        <ng-container *ngIf="isUserSignedIn">
          <div class="form-container">
            <div class="form-group">
              <div class="form-field">
                <label>Export Pro/Team workspace</label>
                <button type="button" (click)="exportProWorkspace();">Export <i *ngIf="exporting" class="fa fa-spinner fa-spin"></i></button>
              </div>
            </div>
          </div>
        </ng-container>

        <h2>Default Regions</h2>

        <div class="form-container">
          <div class="form-group">
            <div class="form-field">
              <label>AWS Region</label>
              <ng-select formControlName="regionsSelect" bindLabel="region" bindValue="region" [clearable]="false" [items]="regions"
                         [(ngModel)]="selectedRegion" [appendTo]="'body'"></ng-select>
            </div>
          </div>

          <div class="form-group">
            <div class="form-field">
              <label>Azure Location</label>
              <ng-select formControlName="locationsSelect" bindLabel="location" bindValue="location" [clearable]="false" [items]="locations"
                         [(ngModel)]="selectedLocation" [appendTo]="'body'"></ng-select>
            </div>
          </div>
        </div>

        <h2>Generics</h2>
        <ng-container *ngIf="appService.detectOs() === eOperatingSystem.mac">
          <div class="form-container">
            <div class="form-group">
              <div class="form-field">
                <label>MacOS Terminal</label>
                <ng-select formControlName="terminalSelect" bindLabel="terminal" bindValue="terminal" [clearable]="false" [searchable]="false"
                           [items]="[{terminal: eConstants.macOsTerminal}, {terminal: eConstants.macOsIterm2}, {terminal: eConstants.macOsWarp}]" [(ngModel)]="selectedTerminal"
                           [appendTo]="'body'"></ng-select>
              </div>
            </div>
          </div>
        </ng-container>

        <div class="form-container">
          <div class="form-group">
            <div class="form-field">
              <label>Color Theme</label>
              <ng-select formControlName="colorThemeSelect"
                         bindLabel="colorTheme"
                         bindValue="colorTheme"
                         [clearable]="false"
                         [searchable]="false"
                         [items]="[{colorTheme: eConstants.darkTheme}, {colorTheme: eConstants.lightTheme},{colorTheme: eConstants.systemDefaultTheme}]"
                         [(ngModel)]="selectedColorTheme"
                         (change)="setColorTheme(selectedColorTheme)"
                         [appendTo]="'body'">
              </ng-select>
            </div>
          </div>
        </div>

        <ng-container>
          <div class="form-container">
            <div class="form-group">
              <div class="form-field">
                <label><i class="moon-Help fix-top"
                          matTooltip="Note: when switching method a backup of your credentials and config files will be created and the original files cleaned."></i>&nbsp;AWS
                  Credential Method</label>
                <ng-select formControlName="credentialMethodSelect"
                           bindLabel="credentialMethod"
                           bindValue="credentialMethod"
                           [clearable]="false"
                           [searchable]="false"
                           [items]="[{credentialMethod: eConstants.credentialFile}, {credentialMethod: eConstants.credentialProcess}]"
                           [(ngModel)]="selectedCredentialMethod"
                           (change)="showWarningModalForCredentialProcess()"
                           [appendTo]="'body'">
                </ng-select>

              </div>
            </div>
          </div>
        </ng-container>

        <h2>Default Webconsole Duration</h2>
        <div class="form-container">
          <div class="form-group">
            <div class="form-field">
              <label><i class="moon-Help fix-top"
                        matTooltip="Note: The minimum session duration is 1 hour, and can be set to a maximum of 12 hours."></i>&nbsp;Session
                Time</label>
              <input formControlName="sessionDuration" type="number" class="form-control" min="1" max="12" step="1"
                     [value]="webConsoleSessionDuration">
            </div>
          </div>
        </div>

        <hr class="proxy-settings-section">

        <h2 class="proxy-settings-section">Proxy settings</h2>

        <div class="form-container proxy-settings-section">

          <div class="form-group">
            <div class="form-field">
              <ng-select formControlName="proxyProtocol" [items]="['HTTP', 'HTTPS']" [(ngModel)]="proxyProtocol" [appendTo]="'body'"
                         class="proxy-length-1"></ng-select>

              <span class="proxy-length-2">://</span>

              <input spellcheck="false" formControlName="proxyUrl" type="text" class="form-control proxy-length-3" placeholder="Enter Proxy Url"
                     [value]="proxyUrl">

              <span class="proxy-length-4">:</span>

              <input spellcheck="false" formControlName="proxyPort" type="text" class="form-control proxy-length-5" placeholder="Enter Proxy Port"
                     [value]="proxyPort">
            </div>
          </div>

          <div class="form-group">
            <div class="form-field">
              <mat-checkbox formControlName="showAuthCheckbox" [(ngModel)]="showProxyAuthentication"></mat-checkbox>
              Use authentication
            </div>
          </div>

          <div class="form-group" *ngIf="showProxyAuthentication">
            <div class="form-field">
              <label>Username</label>
              <input spellcheck="false" formControlName="proxyUsername" type="text" class="form-control" placeholder="Proxy Username"
                     [value]="proxyUsername">
            </div>

            <div class="form-field">
              <label>Password</label>
              <input formControlName="proxyPassword" type="password" class="form-control" placeholder="Proxy Password" [value]="proxyPassword">
            </div>
          </div>
        </div>

      </div>
    </mat-tab>

    <mat-tab>
      <ng-template mat-tab-label>
        <i class="mat-tab-icon moon-Terminal"></i>
        <span class="mat-tab-label-text">IdP Url</span>
      </ng-template>

      <div class="no-padding no-margin panel">
        <h2>IdP URL</h2>

        <div class="form-container">

          <div class="form-group">
            <div class="form-field form-control-input-button max-width">
              <input spellcheck="false" formControlName="idpUrl" type="text" class="form-control max-width" placeholder="Add SAML 2.0 IdP URL"
                     (keydown.enter)="$event.preventDefault(); manageIdpUrl(idpUrlValue ? idpUrlValue.id: -1);"
                     [value]="idpUrlValue ? idpUrlValue.url : ''">
              <button type="button" (click)="manageIdpUrl(idpUrlValue ? idpUrlValue.id: -1);"><i
                class="{{editingIdpUrl ? 'moon-Edit' : 'moon-Add'}}"></i></button>
            </div>
          </div>

          <div class="form-group scrollable max-height-230">
            <table class="table option-table">
              <tbody>
              <ng-container *ngFor="let idpUrl of appProviderService.idpUrlService.getIdpUrls()">
                <tr *ngIf="idpUrl">
                  <td>{{idpUrl.url}}</td>
                  <td>
                    <button class="icon-button inline" type="button" (click)="editIdpUrl(idpUrl.id);"><i class="moon-Edit"></i></button>
                    <button class="icon-button inline" type="button" (click)="deleteIdpUrl(idpUrl.id);"><i class="moon-Delete"></i></button>
                  </td>
                </tr>
              </ng-container>
              </tbody>
            </table>
          </div>

        </div>
      </div>
    </mat-tab>

    <mat-tab>
      <ng-template mat-tab-label>
        <i class="mat-tab-icon moon-Team"></i>
        <span class="mat-tab-label-text">Profiles</span>
      </ng-template>
      <div class="no-padding no-margin panel">
        <h2>Named Profiles</h2>

        <div class="form-group">
          <div class="form-field form-control-input-button max-width">
            <input spellcheck="false" formControlName="awsProfile" type="text" class="form-control max-width" placeholder="Add a new Named Profile"
                   (keydown.enter)="$event.preventDefault(); manageAwsProfile(awsProfileValue ? awsProfileValue.id: -1);"
                   [value]="awsProfileValue ? awsProfileValue.name : ''">
            <button class="button" type="button" (click)="manageAwsProfile(awsProfileValue ? awsProfileValue.id: -1);"><i
              class="{{editingAwsProfile ? 'moon-Edit' : 'moon-Add'}}"></i></button>
          </div>
        </div>

        <div class="form-group scrollable max-height-230">
          <table class="table option-table">
            <tbody>
            <ng-container *ngFor="let profile of appProviderService.namedProfileService.getNamedProfiles()">
              <tr *ngIf="profile">
                <td>{{profile.name}}</td>
                <td>
                  <ng-container *ngIf="profile.name !== 'default'">
                    <button class="icon-button inline" type="button" (click)="editAwsProfile(profile.id);"><i class="moon-Edit"></i></button>
                    <button class="icon-button inline" type="button" (click)="deleteAwsProfile(profile.id);"><i class="moon-Delete size-up"></i>
                    </button>
                  </ng-container>
                </td>
              </tr>
            </ng-container>
            </tbody>
          </table>
        </div>
      </div>
    </mat-tab>

    <mat-tab>
      <ng-template mat-tab-label>
        <i class="mat-tab-icon moon-Server"></i>
        <span class="mat-tab-label-text">SSM</span>
      </ng-template>

      <ng-container>
        <h2>AWS SSM dialog behaviour</h2>
        <div class="form-container">
          <div class="form-group">
            <div class="form-field">
              <label>Populate Region</label>
              <ng-select formControlName="ssmRegionBehaviourSelect"
                         bindLabel="ssmRegionBehaviour"
                         bindValue="ssmRegionBehaviour"
                         [clearable]="false"
                         [searchable]="false"
                         [items]="[{ssmRegionBehaviour: eConstants.ssmRegionNo}, {ssmRegionBehaviour: eConstants.ssmRegionDefault}]"
                         [(ngModel)]="selectedSsmRegionBehaviour"
                         [appendTo]="'body'">
              </ng-select>
            </div>
          </div>
        </div>
      </ng-container>

    </mat-tab>

    <mat-tab *ngIf=!eConstants.disablePluginSystem>
      <ng-template mat-tab-label>
        <i class="mat-tab-icon moon-Puzzle"></i>
        <span class="mat-tab-label-text">Plugins</span>
      </ng-template>
      <div class="no-padding no-margin panel">
        <h2>Download Plugin manually</h2>

        <div class="form-group">
          <div class="form-field form-control-input-button max-width">
            <input spellcheck="false" formControlName="pluginDeepLink" type="text" class="form-control max-width"
                   placeholder="Insert an npm package name"
                   (keydown.enter)="$event.preventDefault(); installPlugin();">
            <button [disabled]="fetchingPlugins" class="button" type="button" (click)="installPlugin();"><i class="moon-Add"></i></button>
          </div>

          <h4> Installed plugins
            <button class="borderless-button pull-right" (click)="$event.preventDefault(); openPluginFolder()"><i class="fas fa-folder-open blackery"
                                                                                                                  matTooltip="Open plugin folder"></i>
            </button>
            <button [disabled]="fetchingPlugins" class="borderless-button pull-right" (click)="$event.preventDefault(); refreshPluginList(true)"><i
              class="fa fa-refresh blackery" matTooltip="Refresh plugin list"></i></button>
          </h4>

          <div class="form-group scrollable max-height-320 tableFixHead">
            <table class="table plugin-table">
              <thead>
              <th><span class="centered-column">Name</span></th>
              <th><span class="centered-column">Version</span></th>
              <th><span class="centered-column">Supported OS</span></th>
              <th><span class="centered-column">Enabled</span></th>
              </thead>
              <tbody>
              <ng-container *ngFor="let plugin of pluginList">
                <tr>
                  <td><i class="fa fa-info-circle blackery" matTooltipClass="allow-cr"
                         [matTooltip]="getPluginExtraInfo(plugin)"></i>&nbsp;{{plugin.metadata.uniqueName}}</td>
                  <td>{{plugin.metadata.version}}</td>
                  <td [innerHTML]="getSupportedOsIcons(plugin)"></td>
                  <td>
                    <mat-slide-toggle class="inline toggleColoredCorrectly" (toggleChange)="togglePluginActivation(plugin)"
                                      [checked]="plugin.metadata.active"></mat-slide-toggle>
                  </td>
                </tr>
              </ng-container>
              </tbody>
            </table>
          </div>
        </div>

      </div>
    </mat-tab>

    <mat-tab>
      <ng-template mat-tab-label>
        <i class="mat-tab-icon moon-Open-Web-Console"></i>
        <span class="mat-tab-label-text">Multi-Console</span>
      </ng-template>
      <div class="no-padding no-margin panel">
        <div class="hero-unit hero-unit-extension">
          <img src="assets/images/in-browser.png" alt="">
          <p class="extension-info">
            <strong>Multi-Console Browser Extension</strong>
            <span class="description-container">Navigate multiple AWS consoles on different tabs at once. <a
              (click)="openBrowser('https://docs.leapp.cloud/latest/built-in-features/multi-console/#install-the-extension')">Read the docs for more info.</a></span>
            <br>
            <span class="button-container">
              <button type="button" class="install-firefox-button"
                      (click)="openBrowser('https://addons.mozilla.org/en-US/firefox/addon/leapp-multi-console-extension/')">Get for Firefox</button>
              <button type="button" class="install-chrome-button"
                      (click)="openBrowser('https://d3o59asa8udcq9.cloudfront.net/extension/leapp-extension-chromium-latest.zip')">Get for Chrome/Others</button>
            </span>
          </p>
        </div>
        <!--        <div class="open-method-container">-->
        <!--          <h2>Open Web Console - Method</h2>-->

        <!--          <div class="form-container">-->
        <!--            <div class="form-group">-->
        <!--              <div class="form-field">-->
        <!--                <label>Method</label>-->
        <!--                <ng-select formControlName="terminalSelect" bindLabel="terminal" bindValue="terminal" [clearable]="false"-->
        <!--                           [items]="[{terminal: eConstants.macOsTerminal}, {terminal: eConstants.macOsIterm2}]" [(ngModel)]="selectedTerminal"-->
        <!--                           [appendTo]="'body'"></ng-select>-->
        <!--              </div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <div class="enable-option">
          <mat-slide-toggle class="enable-extension-toggle" (toggleChange)="toggleExtension()" [checked]="extensionEnabled">Enable Multi-Console
            Extension
          </mat-slide-toggle>
          <span class="extension-description">Use the Extension as default. Fallback to the Single-Console method if the browser is closed or any error occurs.</span>
        </div>
      </div>
    </mat-tab>

    <!--<mat-tab>
      <ng-template mat-tab-label>
        <i class="mat-tab-icon moon-User"></i>
        <span class="mat-tab-label-text">Plans</span>
      </ng-template>
      <div class="no-padding no-margin panel">

        <br>
        <div class="toggle-prices">
          <label class="switch">
            <input type="checkbox" (click)="setBillingPeriod();" checked>
            <div class="slider">
              <span>Monthly</span>
              <span>Yearly (17% discount)</span>
            </div>
          </label>
        </div>

        <div class="best-discount-ever">EARLY PROMO (33% additional discount)</div>

        <div class="plans-group-container">
          <div class="plan plan-free {{leappPlanStatus === eEnabledLeappPlanStatus.free ? 'selected' : ''}}">
            <div class="plan-header">
              <span>Community</span>
              <p>Open-source version with local workspace</p>
            </div>
            <div class="plan-body">
              <div class="price-container">
                <span class="price-value">FREE</span>
              </div>
              <div class="cta-button" *ngIf="leappPlanStatus === eEnabledLeappPlanStatus.free">CURRENT PLAN</div>
              <div class="cta-button clickable" *ngIf="leappPlanStatus !== eEnabledLeappPlanStatus.free">DOWNGRADE</div>
              <ul class="plan-features">
                <li>
                  <span class="check-mark-icon"><app-check-icon-svg [color]="'#292929'"></app-check-icon-svg></span>
                  <span>Open-source version with local workspace</span>
                </li>
                <li>
                  <span class="check-mark-icon"><app-check-icon-svg [color]="'#292929'"></app-check-icon-svg></span>
                  <span>Local workspace with device encryption</span>
                </li>
                <li>
                  <span class="check-mark-icon"><app-check-icon-svg [color]="'#292929'"></app-check-icon-svg></span>
                  <span>Automatic credentials management</span>
                </li>
              </ul>
            </div>
          </div>

          <div class="plan plan-pro {{(leappPlanStatus === eEnabledLeappPlanStatus.proEnabled || leappPlanStatus === eEnabledLeappPlanStatus.proPending) ? 'selected' : ''}}">
            <div class="plan-header">
              <span>Pro</span>
              <p>Lock your Leapp Client and sync with unlimited devices</p>
              <small class="lifetime-deal" *ngIf="selectedPeriod === eBillingPeriod.yearly">LIFETIME&nbsp;DEAL</small>
            </div>
            <div class="plan-body">
              <div class="price-container">
                <span *ngIf="selectedPeriod === eBillingPeriod.yearly && leappPlanStatus !== eEnabledLeappPlanStatus.proPending" class="price-value">
                  <small class="full-price">89$</small><small class="discounted-price">59$</small>
                  <small class="micro-small">4.92$ per Month, billed yearly</small>
                </span>
                <span *ngIf="selectedPeriod === eBillingPeriod.monthly && leappPlanStatus !== eEnabledLeappPlanStatus.proPending" class="price-value">
                  <small class="full-price">8.99$</small><small class="discounted-price">5.99$</small>
                  <small class="micro-small">Billed monthly</small>
                </span>
                <span class="price-value" *ngIf="leappPlanStatus === eEnabledLeappPlanStatus.proPending">Check your email</span>
              </div>

              <div class="cta-button clickable" (click)="openLeappProPreCheckoutDialog()" *ngIf="leappPlanStatus === eEnabledLeappPlanStatus.free">UPGRADE TO PRO</div>
              <div class="cta-button" *ngIf="leappPlanStatus === eEnabledLeappPlanStatus.proEnabled">CURRENT PLAN</div>
              <div class="cta-button" *ngIf="leappPlanStatus === eEnabledLeappPlanStatus.proPending">UPGRADED</div>
              <div class="cta-button clickable" *ngIf="leappPlanStatus === eEnabledLeappPlanStatus.enterprise">DOWNGRADE</div>

              <ul class="plan-features">
                <li>
                  <span class="check-mark-icon"><app-check-icon-svg [color]="'#378180'"></app-check-icon-svg></span>
                  <span class="all-free-features">Lock your Leapp access with Username and Password</span>
                </li>
                <li>
                  <span class="check-mark-icon"><app-check-icon-svg [color]="'#378180'"></app-check-icon-svg></span>
                  <span>Create an encrypted backup of your Configuration</span>
                </li>
                <li>
                  <span class="check-mark-icon"><app-check-icon-svg [color]="'#378180'"></app-check-icon-svg></span>
                  <span>Bring your Leapp configuration on every device</span>
                </li>
              </ul>
            </div>
          </div>

          <div class="plan plan-team {{leappPlanStatus === eEnabledLeappPlanStatus.enterprise ? 'selected' : ''}}">
            <div class="plan-header">
              <span>Business</span>
              <p>Collaborate with your team and centralize Cloud Access</p>
            </div>
            <div class="plan-body">
              <div class="price-container">
                <span class="price-value">Custom pricing</span>
              </div>
              <div class="cta-button {{leappPlanStatus === eEnabledLeappPlanStatus.enterprise ? '': 'clickable'}}" (click)="contactSales();">{{leappPlanStatus === eEnabledLeappPlanStatus.enterprise ? 'UPGRADED' : 'CONTACT SALES'}}</div>
              <ul class="plan-features">
                <li>
                  <span class="check-mark-icon"><app-check-icon-svg [color]="'#292929'"></app-check-icon-svg></span>
                  <span>Team collaboration and management</span>
                </li>
                <li>
                  <span class="check-mark-icon"><app-check-icon-svg [color]="'#292929'"></app-check-icon-svg></span>
                  <span>Leapp session sharing with team members</span>
                </li>
                <li>
                  <span class="check-mark-icon"><app-check-icon-svg [color]="'#292929'"></app-check-icon-svg></span>
                  <span>Centralized point of access for the Company</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>


      <div class="cta-label" *ngIf="leappPlanStatus === eEnabledLeappPlanStatus.proPending">
        Check your email to continue the registration to the Leapp portal, if you have any trouble contact us at <a (click)="contactSupport();">support@noovolari.com</a>.
      </div>
    </mat-tab>-->

  </mat-tab-group>

  <button type="button" (click)="saveOptions();" [disabled]="!form.valid" class="margin-fix">Done</button>
</form>
